<template>
  <div id='tmpl'>
      <div id="imgNav">
          <ul v-bind="{style: 'width:'+ ulW +'px'}">
              <li>全部</li>
              <li v-for="itme in imgnavs">{{itme.title}}</li>
          </ul>
      </div>
  </div>
</template>
<script>
import {Toast} from 'mint-ui';

export default {
  
    data () {
        return {
            ulW: 375, //v-bind绑定ul的宽
            imgnavs:[] //保存图片分类数据
        }
    },
    created(){
        this.getimgnavs();
    },
    methods:{
        getimgnavs(){
            var url = this.$common.apidomain+'/api/getimgcategory';
            this.$http.get(url).then(function(res){
                if(res.body.status !=0){
                    Toast('您要的数据不在');
                    return;
                }
                this.imgnavs = res.body.message;
                    //console.log(res.body.message);
                var liW = 62; //每个li的宽
                var count = res.body.message.length + 1;//加载了多少个li  
                this.ulW = liW*count;
            });
        }
    }
}
</script>
<style lang="css" scoped>
    /* 图片分类 */
    #imgNav{
        width: 375px;
        max-width: 375px;
        overflow-x: auto;
    }
    #imgNav ul {
        margin: 0px;
        padding-left: 20px;
    }
    #imgNav li {
        list-style: none;
        display: inline-block;
        color: #0094f0;
        font-size: 14px;
        padding-left: 6px;
    }
</style>